<template>
    <view>
        <view class="fotInfos" @tap="openPopup()">
            <view class="txt">联系客服</view>
            <view class="txtImg">
                <uni-icons class="txticon" type="right" size="18" :color="objColor2.textColor"></uni-icons>
                <!-- <image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/cartoon/turn_act.png"></image> -->
            </view>
        </view>

        <!-- @close="closePopup" 
            closeable -->
        <u-popup 
            round='25' 
            :show="showPopup" 
            mode="bottom" 
            position="bottom" 
            
        >
            <view class="box_popup">
                <view class="title">
                    联系客服
                    <image class="close_icon" src="https://oos-cn.ctyunapi.cn/front-end/static/static/s_close.png" @tap="closePopup"></image>
                </view>
                <view class="list">
                    <view class="item">
                        <view class="text">
                            <view class="p1">平台客服电话: {{ siteItemData.sellerBasicsConfigDTO.platformCustomersPhone ? siteItemData.sellerBasicsConfigDTO.platformCustomersPhone : '无' }}</view>
                            <view class="p2">服务内容：系统使用问题、订单异常、价格问题等</view>
                        </view>
                        <view class="icon" @tap="callPlatform">
                            <image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/cartoon/call_icon.png"></image>
                        </view>
                    </view>
                    <view class="item">
                        <view class="text">
                            <view class="p1">场站客服电话: {{ siteItemData.managerPhone ? siteItemData.managerPhone : '无' }}</view>
                            <view class="p2">服务内容：站场运营类、电桩保修等</view>
                        </view>
                        <view class="icon" @tap="callServiec">
                            <image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/cartoon/call_icon.png"></image>
                        </view>
                    </view>
                </view>
                <view class="tip">
                    选对咨询类型可更快解决问题！
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script lang="ts">


export default {
    data() {
        return {
            showPopup: false,
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        siteItemData: {
            type: Object,
        },
    },
    /**
     * 组件的方法列表
     */
    methods: {
        openPopup() {
            this.showPopup = true
        },
        closePopup() {
            this.showPopup = false
        },
        
        async callPlatform(){
            this.showPopup = false
            if(this.siteItemData.sellerBasicsConfigDTO.platformCustomersPhone){
                //#ifdef APP-PLUS
					let result = await this.$store.dispatch("requestPermissions",'CALL_PHONE')
					if (result !== 1){
						return
					}else{
						uni.makePhoneCall({
						    phoneNumber: this.siteItemData.sellerBasicsConfigDTO.platformCustomersPhone
						});
					}    
				//#endif
				//#ifdef MP-WEIXIN
					uni.makePhoneCall({
					    phoneNumber: this.siteItemData.sellerBasicsConfigDTO.platformCustomersPhone
					});
				//#endif
            }
        },
        async callServiec(){
            this.showPopup = false
            if(this.siteItemData.managerPhone){
                //#ifdef APP-PLUS
					let result = await this.$store.dispatch("requestPermissions",'CALL_PHONE')
					if (result !== 1){
						return
					}else{
						uni.makePhoneCall({
						    phoneNumber: this.siteItemData.managerPhone
						});
					}    
				//#endif
				//#ifdef MP-WEIXIN
					uni.makePhoneCall({
					    phoneNumber: this.siteItemData.managerPhone
					});
				//#endif
            }
        },
        
    },
    created: function () {
        
    }
}
</script>
<style lang="less" scoped>
@import "../../../commin/commin.less";


.fotInfos {
    background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
    .borders(2rpx, @white-color);
    box-shadow: 4px 7px 20px 0px rgba(166, 171, 179, 0.24);
    .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
    .kuan(654rpx);
    .paddings(40rpx, 24rpx, 40rpx, 32rpx);
    display: flex;
    justify-content: space-between;

    .txt {
        .fontsize(34rpx);
        font-family: PingFang SC;
        font-weight: 400;
        color: @text-color2;
    }
    .txtImg{
        .img{
            .kuangao(16rpx, 27rpx);
        }
        .txticon {
            color: var(--textColor) !important;
        }
    }
}


.box_popup {
    width: 702rpx!important;
    margin: 0 24rpx;
    .uicon-close{
        font-size: 20rpx!important;
    }

    .title{
        padding: 38rpx 0;
        text-align: center;
        .close_icon{
            width: 30rpx;
            height: 30rpx;
            float: right;
            margin-top: -10rpx;
        }
    }
    .list{
        .item{
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1rpx solid #DCDFE6;
            padding: 30rpx 0;
            .text{
                width: 80%;
                .p1{
                    font-size: 26rpx;
                    font-family: PingFang SC-Medium, PingFang SC;
                    font-weight: 400;
                    color: #303133;
                }
                .p2{
                    margin-top: 24rpx;
                    font-size: 22rpx;
                    font-family: PingFang SC-Medium, PingFang SC;
                    font-weight: 400;
                    color: #909399;
                }
            }
            .icon{
                .img{
                    width: 48rpx;
                    height: 48rpx;
                }
            }
        }
        .item:last-child{
            border-bottom: 1rpx solid #DCDFE6;
        }
        
    }
    .tip{
        padding: 24rpx 0;
        text-align: center;
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #FC724C;
    }
}
</style>
